<template>
    <div>
        <a-tabs v-model:activeKey="activeKey" :animated="false" @change="handleTabChange">
            <a-tab-pane :tab="item.tabName" v-for="(item, index) of tabArr" :key="index"> </a-tab-pane>
        </a-tabs>

        <div style="position: relative">
            <a-spin :spinning="loading" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" />
            <!-- 阶段规划信息 -->
            <div style="background: #f0f2f5; padding: 24px 0 0 0">
                <div style="padding: 0 24px 24px 24px; background: #fff">
                    <BaseInfo :errorMsg="errorMsg" :planDetail="tabArr[activeKey]" :detail="detailData" />
                </div>
            </div>

            <!-- 版本概况 -->
            <div style="background: #f0f2f5; padding: 24px 0 0 0">
                <GaiKuangTabs :planDetail="tabArr[activeKey]" :detail="detailData" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import api from '@/api';
import GaiKuangTabs from './GaiKuangTabs/index.vue';
import BaseInfo from './BaseInfo.vue';
import moment from 'moment';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        BaseInfo,
        GaiKuangTabs
    },
    setup(props) {
        const state = reactive<any>({
            activeKey: 0,
            tabArr: [],
            detailData: null,
            loading: false,
            errorMsg: ''
        });
        const handleTabChange = () => {
            state.detailData = null;
            getDetailData();
        };
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: state.tabArr[state.activeKey].id
            };
            const { success, moule, errorCode, errorMsg } = await api.registeredProjectModel.findSSContrastByAPId(query);
            if (success) {
                let versionList = null;
                const { pmpSsProductVersionDTOS } = moule;
                if (pmpSsProductVersionDTOS && pmpSsProductVersionDTOS.length) {
                    versionList = pmpSsProductVersionDTOS.map((item) => ({
                        ...item,
                        randdPlanStartTime: item.randdPlanStartTime ? moment(item.randdPlanStartTime).format('YYYY-MM-DD') : '',
                        expectTime: item.expectTime ? moment(item.expectTime).format('YYYY-MM-DD') : '',
                        onlineRealTime: item.onlineRealTime ? moment(item.onlineRealTime).format('YYYY-MM-DD') : ''
                    }));
                }
                state.detailData = {
                    ...moule,
                    pmpSsProductVersionDTOS: versionList
                };
                state.errorMsg = '';
            } else {
                state.detailData = null;
                if (errorCode) {
                    state.errorMsg = errorMsg;
                } else {
                    message.error(moule);
                    state.errorMsg = '';
                }
            }
            state.loading = false;
        };
        const init = () => {
            const { pmpAnnualPlanningDTOS } = props.lubiaoDetail;
            if (pmpAnnualPlanningDTOS.length) {
                if (pmpAnnualPlanningDTOS.length === 4) {
                    const arr = ['第一季度', '第二季度', '第三季度', '第四季度'];
                    state.tabArr = pmpAnnualPlanningDTOS.map((item, index) => ({
                        ...item,
                        tabName: arr[index]
                    }));
                    const index = moment().quarter();
                    state.activeKey = index - 1;
                } else {
                    const arr = ['上半年度', '下半年度'];
                    state.tabArr = pmpAnnualPlanningDTOS.map((item, index) => ({
                        ...item,
                        tabName: arr[index]
                    }));
                    const index = moment().quarter();
                    state.activeKey = index > 2 ? 1 : 0;
                }
                getDetailData();
            }
        };
        init();
        return {
            ...toRefs(state),
            handleTabChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-tabs-bar) {
    margin-bottom: none;
    margin: 0;
}
::v-deep(.ant-tabs) {
    padding-left: 36px !important;
}

::v-deep(.ant-tabs-top-content) {
    background: #f0f2f5 !important;
}
::v-deep(.ant-tabs-bar) {
    margin-bottom: none;
    margin: 0;
}
</style>